<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
			<tn-navbar>在场车辆 </tn-navbar>
			<tn-input v-model="inputValue" placeholder="请输入车牌查询">
          <template #suffix>
            <view class="tn-ml tn-mr" @click="filterData">
              <tn-icon name="search" color=" tn-gray_bg"></tn-icon>
            </view>
          </template>
        </tn-input>
		</template>

		<view class="tn-mt-lg tn-flex tn-flex-column">
			<view v-for="(item, index) in dataList" :key="index" class=" " @click="tnParamById('/pages/main/car/detail', item.id)">
				<view class=" tn-shadow-md tn-radius tn-m-sm tn-white_text  tn-gradient-bg__indigo-single ">
					<view class="tn-flex  tn-flex-column  tn-p-sm">
						<view class="tn-flex tn-align-center justify-between  ">
							<view class=" tn-text-lg"><tn-icon name="taxi" color="tn-green-disabled" size="40" />
							 <text class="tn-ml-xs">{{ item.name }}</text>
							</view>
							<view class=" tn-text-sm"> 
							 <text class="tn-ml-xs tn-grey_text">{{ item.type }}</text>
							</view>
						</view> 
						<view class="tn-flex tn-align-center justify-start tn-mt-sm">
							<text>{{ item.createTime }}</text>
						</view>
					</view> 
					 
				</view>
				 
			</view>
		</view>
		<template #loadingMoreNoMore> </template>
	</z-paging>
</template>

<script setup lang="ts">
	import { onMounted, ref } from "vue";
	import { tnParamById } from "@/utils/tnUtil";

	const inputValue = ref("");
	// 模拟数据
	const tempList = ref([]);

	const filterData = () => {
		// paging.value.reload(true);
	};
	// z-paging 示例
	const paging = ref(null);
	// 数据列表
	const dataList = ref();

	const queryList = (pageNo, pageSize) => {
		// 模拟数据

		for (let i = 0; i < 10; i++) {
			tempList.value.push({
				id: i,
				name: "粤SVS212" + i,
				status: i % 2,
				createTime: "2024-10-10 20:49:34",
				type: "高层车",
			});
		}
		paging.value.complete(tempList.value);

		// // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
		//   // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
		//   request.queryList({ pageNo,pageSize }).then(res => {
		//   	// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
		//       paging.value.complete(res.data.list);
		//   }).catch(res => {
		//   	// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
		//   	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
		//   	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
		//   	paging.value.complete(false);
		//   })
	};
	onMounted(() => { });
</script>

<style lang="scss" scoped>
	.parking-name {
		flex: 1;
		/* 使停车场名称占据剩余空间 */
		
	}

</style>
